<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册用户</title>
</head>

<body>
    <style>
        table {
            margin: 60px auto;
        }

        table,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
            text-align: center;
        }

        td {
            padding: 5px
        }
    </style>
    <script>
        //点击提交后将自我介绍的内容弹框提示出来
        function sub() {
            var sub = document.getElementById("introduce").value;
            alert(sub);
        }
        //点击校验后判断输入的用户名是否为“admin”,以及判断两次输入的密码是否一致
        function check() {
            if (document.getElementById("username").value != "admin") {
                alert("用户名输入有误");
                return false;
            } else if (document.getElementById('pwd').value == "") {
                alert('用户密码不能为空');
                return false;
            } else if (document.getElementById('pwd').value != document.getElementById('repwd').value) {
                alert('两次密码输入不一致!');
                return false;
            } else
                alert("校验成功")
                return true;
        }
        // 点击重置后刷新页面
        function cancel() {
            window.location.reload;
        }
    </script>
    </head>

    <body>
        <form >
            <table align="center">
                <tr>
                    <th colspan="2">用户注册</th>
                </tr>
                <tr>
                    <td colspan="2" ">带 <font color="#FF0000">*</font> 号为必填项</td>
                </tr>
                <tr>
                    <td width="80">用户名:</td>
                    <td><input type="text" name="username" id="username" />
                        <font color="#FF0000">*</font>
                    </td>
                </tr>
                <tr>
                    <td>密&nbsp码:</td>
                    <td><input type="password" name="pwd" id="pwd" />
                        <font color="#FF0000">*</font>
                    </td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="repwd" id="repwd" />
                        <font color="#FF0000">*</font>
                    </td>
                </tr>
                <tr>
                    <td>性&nbsp别:</td>
                    <td>
                        <input type="radio" name="sex" value="男" /> 男&nbsp&nbsp;
                        <input type="radio" name="sex" value="女" /> 女
                    </td>
                </tr>
                <tr>
                    <td>学&nbsp历:</td>
                    <td>
                        <input name="status" type="radio">本科
                        <input name="status" type="radio">专科
                    </td>
                </tr>
                <tr>
                    <td>自我介绍:</td>
                    <td>
                        <textarea id="introduce" cols="20" rows="5"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="center">
                        <button type = "submit" onclick="return sub();">提交</button>
                        <button onclick="cancel">重置</button>
                        <button type = "submit" onclick="return check();">校验</button>
                    </td>
                </tr>
            </table>
        </form>

    </body>

</html>